<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button>按钮</button>
    <span style="display: none">正在请求请稍后....</span>
    <script src="./jquery-1.12.4.js"></script>
    <script>
      $('button').on('click', function () {
        $.ajax({
          // url表示请求的地址
          url: 'http://localhost:5000/check',
          // method 请求方式,不写,默认就是get请求
          method: 'post',
          // 要上传的数据. 不管是什么请求方式,jquery会自动帮我们拼接数据
          data: {
            name: '123',
          },
          // 设置请求的超时时间,单位是毫秒
          timeout: 2000,
          // 声明一下响应回来的数据是什么格式:
          dataType: 'text',
          // 响应成功,success回调会触发. data是响应主体中的数据,并且如果是json字符串,jquery会自动将json字符串转成js对象
          success: function (data) {
            console.log(data)
          },
          // 这一次请求失败的时候,触发的回调函数
          error: function (xhr) {
            console.log('失败了', xhr)
          },
          // 响应完成就会触发
          complete: function () {
            console.log('响应完成')
            $('span').css('display', 'none')
          },
          //请求发送之前调用
          beforeSend: function () {
            $('span').css('display', 'block')
            console.log('请求发送之前调用了')
            // 注意: 如果beforeSend中显式的声明了return false,则不发送请求
          },
        })
      })
    </script>
  </body>
</html>
